<!DOCTYPE html>
<html>
	<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>INFINI|映纷创意</title>
		<link rel="stylesheet" href="css/myweb.css">
	</head>
	<body>
		<header>
			<div class="header" align="center"><img src="img/title2.png" alt="" class="logo"/></div>		    
		    <div class="header">		    	
		    	    <ul>
		    		    <li><a href="index.html" class="nav">HOME</a></li>
				        <li><a href="index.html"class="nav">WORK</a></li>
				        <li><a href="index.html" class="nav">CONTACT</a></li>
				        <li> <a href="index.html" class="nav">JOIN US</a></li>
		    	    </ul>							   
		    </div>
            <div class="wrap">
            	<div class="center">
            		<div class="swiper">
            			<div class="device">
            				<div class="swiper-container">
            					<div class="swiper-wrap">
            						<div class="swiper-slide">
            	                         <img src="img/banner picture.jpg" alt="" class="slider">
            						</div>
                                </div>
            	            </div>
            			</div>            
            		</div>	
            		<div>
		                <div class="pagination"></div>
                            <div class="message">
		    	                <p>头条号创作平台</p>
		                    </div>
		                    
            		</div>
		            <div class="swiper_p">
		    	        <p>INFINI （映纷创意）是一家独立创新营销公司，致力于创造会流动的美好创意。我们从策略与洞察出发，不断探索营销和创意的多元表达，用创作精神为品牌提供更具生命力的跨媒体整合营销服务。</p>
		 	        </div>
		 	        <div class="parner">
		 		        <span><img src="img/1.jpg"></span>
		 		        <span><img src="img/2.jpg"></span>
		 		        <span><img src="img/14.jpg"</span>
		 		        <span><img src="img/3.jpg"</span>
		 		        <span><img src="img/4.jpg"</span>
		 		        <span><img src="img/5.jpg"</span>
		 		        <span><img src="img/6.jpg"</span>
		 		        <span><img src="img/7.jpg"</span>
		 		        <span><img src="img/12.jpg"</span>
		 		        <span><img src="img/13.jpg"</span>
		 		        <span><img src="img/8.jpg"</span>
		 		        <span><img src="img/9.jpg"</span>
		 		        <span><img src="img/10.jpg"</span>
		 		        <span><img src="img/11.jpg"</span>	
		 	        </div>
		 	        <div class="content">
		 		        <a class="con">
		 			        <div class="work">
		 				        <div class="work_wrap">
		 					        <ul>
		 						        <li class="work_title">抖音</li>
		 						        <li class="work_remark">迪拜跨年灯光秀</li>
		 					        </ul>
		 				        </div>
		 			        </div>
		 			        <img src="img/5c3ed5adc5c1c.jpg" alt="">
		 			        <p>抖音海外版tik tok</p>
		 		        </a>
		 		        <a class="con">
		 			        <div class="work">
		 				        <div class="work_wrap">
		 					        <ul>
		 						        <li class="work_title">今日头条</li>
		 						        <li class="work_remark">今日头条</li>
		 					        </ul>
		 				        </div>
		 			        </div>
		 			        <img src="img/5c3ec9c702adb.jpg" alt="">
		 			        <p>今日头条年度盛典</p>
		 		        </a>
		 		        <a class="con">
		 			        <div class="work">
		 				        <div class="work_wrap">
		 					        <ul>
		 						        <li class="work_title">宝洁</li>
		 						        <li class="work_remark">你的新年计划还有救</li>
		 					        </ul>
		 				        </div>
		 			        </div>
		 			        <img src="img/5c3ec88634813.jpg" alt="">
		 			        <p>宝洁逆转沙漏</p>
		 		        </a>
		 		        <a class="con">
		 			        <div class="work">
		 				        <div class="work_wrap">
		 					        <ul>
		 						        <li class="work_title">抖音</li>
		 						        <li class="work_remark">抖音x碧桂园公益</li>
		 					        </ul>
		 				        </div>
		 			        </div>
		 			        <img src="img/5c208811a153c.jpg" alt="">
		 			        <p>中国抖有味</p>
		 		        </a>
		 		        <a class="con">
		 			        <div class="work">
		 				        <div class="work_wrap">
		 					        <ul>
		 						        <li class="work_title">腾讯游戏</li>
		 						        <li class="work_remark">不火影，枉少年</li>
		 					        </ul>
		 			        	        </div>
        		 		        	</div>
		         			<img src="img/5c20837a904a3.jpg" alt="">
		 		        	<p>火影忍者</p>
		 		        </a>
        		 		<a class="con">
		         			<div class="work">
		 		        		<div class="work_wrap">
		 				        	<ul>
		 						        <li class="work_title">腾讯</li>
		 						        <li class="work_remark">雅努斯之门</li>
		         					</ul>
		 		        		</div>
		 		        	</div>
		 		        	<img src="img/5be010b1c9c07.jpg" alt="">
		 			        <p>腾讯we大会</p>
	        	 		</a>
		         	</div>
		 	    <footer>
		 	    	<div class="footer_left">
		 	    		<div class="link">   
		 	    		    <a href="http://weibo.com/InfiniVision/" class="link1"><img src="img/contact1.jpg" alt=""></a>
					        <a href="http://infini.zcool.com.cn/" class="link2"><img src="img/contact2.jpg" alt=""></a>
					        <a href="http://i.youku.com/u/UMTMyODY0NzU2" class="link3"><img src="img/contact3.jpg" alt=""></a>		 	    	
		 	    		</div>
		 	    	</div>
		 	    	<div class="footer_right">
				        <div class="contact">
					        <div class="contact_logo"><img src="img/footer_logo.jpg" alt=""></div>
					            <p>INFINI | 映纷创意</p>
					            <p>北京市朝阳区常营</p>
					            <p>TEL : 010-85394331</p>
					            <p>QQ : 7585917</p>
					            <p>Email : infinistudio@foxmail.com</p>
					            <p>weibo : @InfiniStudio</p>
				            </div>
			            </div>
                    </div>
                        <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
		            <script type="text/javascript">
		                $(function(){
			
			            var $tabLi = $('#banner .tab li');
			            var $picLi = $('#banner .pic li');
			            var $btn = $('#banner .btn');
			            var $btnDiv = $('#banner .btn div');
			            var $banner = $('#banner');
			            var index = 0;
			            var timer;

			            $tabLi.hover(function(){
			            	index = $(this).index();
			            	fn();
			            });

			            $banner.hover(function(){
				            $btn.show();
			            	clearInterval(timer);
			            },function(){
			            	$btn.hide();
			            	auto();
			            });

			            $btnDiv.click(function(){
			            	var i = $(this).index();
			            	if ( i )
			            	{
			            		index ++;
			            		index %= $tabLi.length;
			            	}
			            	else
			            	{
			            		index --;
			            		if(index<0)index = $tabLi.length-1;
			            	}
			            	fn();
			            }).mousedown(function(){
			            	return false;
			            });
			
			             auto();
			            function auto(){
			            	timer = setInterval(function(){
			            		index ++;
		            			index %= $tabLi.length;
		            			fn();
		            		},5000);
		            	}
		            	function fn(){
		            		$tabLi.eq(index).addClass('on').siblings().removeClass('on');
		            		$picLi.eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
		            	}
		            });
		</script>
		 	      </footer>
		 	
		 	
		 	
		 	
		 	
		 	
		 	

		</header>
		
	</body>
</html>
